<template>
  <el-dialog title="Tag list" :visible="true" @close="closeTagsDialog">
    <div class="tagsBox">
      <div class="selected">
        <div class="title"><span>APPLIED TAGS</span></div>
        <p v-if="selectedList.length === 0" class="tip">
          Select previously used tags from the list below to add them to this
          product.
        </p>
        <div v-else class="tagList">
          <el-tag
            v-for="(item, index) in selectedList"
            :key="item.id"
            size="medium"
            :closable="true"
            class="tagItem"
            type="primary"
            @close="cancelSelect(item.id, index)"
          >
            {{ item.name }}
          </el-tag>
        </div>
      </div>
      <div class="awiting">
        <div class="awitingLeft">
          <div class="title">
            <span>ALL TAGS</span>
            <div class="btns">
              <el-button
                type="text"
                @click="closable = !closable"
              >delete</el-button>
            </div>
          </div>
          <div class="tagList">
            <el-tag
              v-for="(item, index) in tagList"
              :key="item.id"
              size="medium"
              class="tagItem"
              :closable="closable"
              :type="selectedIndex[index] ? 'info' : 'primary'"
              @click="selectedIndex[index] ? '' : selectTag(item, index)"
              @close="productTagDelete(item.id, index)"
            >
              {{ item.name }}
            </el-tag>
          </div>
        </div>
        <div class="awitingRight">
          <el-form v-model="form">
            <el-form-item>
              <el-input v-model="form.name" placeholder="name" />
            </el-form-item>
            <el-form-item style="text-align:right;">
              <el-button
                v-preventReClick
                type="primary"
                :disabled="!form.name"
                @click="addData"
              >Add</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeTagsDialog">Cancle</el-button>
      <el-button
        :disabled="selectedList.length === 0"
        type="primary"
        @click="emitData"
      >Confirm</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { productTagList, productTagAdd, productTagDelete } from '@/api/product';
export default {
  props: {
    viewTags: {
      type: Boolean,
      required: true
    },
    storeId: {
      type: Number,
      required: true
    },
    // eslint-disable-next-line vue/require-prop-types
    selectedId: {
      required: true
    }
  },
  data() {
    return {
      tagList: [],
      selectedList: [],
      selectedIndex: [],
      closable: false,
      form: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      productTagList(this.storeId).then(res => {
        this.tagList = res.data;
        this.$emit('setTagList', res.data);
        if (typeof this.selectedId === 'object') {
          res.data.forEach((item, index) => {
            if (this.selectedId.includes(item.id)) {
              this.selectedList.push(item);
              this.selectedIndex[index] = true;
            }
          });
        }
      });
    },
    productTagList() {
      productTagList(this.storeId).then(res => {
        this.tagList = res.data;
        this.$emit('setTagList', res.data);
      });
    },
    addData() {
      // 添加
      productTagAdd({
        isLeaf: 0,
        name: this.form.name,
        parentId: 0,
        storeId: this.storeId
      }).then(res => {
        if (res.code === 200) {
          this.form = {};
          this.$message.success(res.message);
          this.productTagList();
        }
      });
    },
    productTagDelete(id, index) {
      // 删除
      productTagDelete([id]).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          if (this.selectedList.length > 0) {
            // 有已选中
            if (this.selectedIndex[index]) {
              this.selectedIndex = this.selectedIndex
                .slice(0, index)
                .concat(
                  this.selectedIndex.slice(index + 1, this.selectedIndex.length)
                );
              const i = this.selectedList.findIndex(item => item.id === id);
              if (i !== -1) {
                this.selectedList = this.selectedList
                  .slice(0, i)
                  .concat(
                    this.selectedList.slice(i + 1, this.selectedList.length)
                  );
              }
            }
          }
          this.productTagList();
        }
      });
    },
    selectTag(item, index) {
      // 选中
      this.selectedList.push(item);
      this.selectedIndex[index] = true;
    },
    cancelSelect(id, index) {
      // 取消选中
      this.selectedList = this.selectedList
        .slice(0, index)
        .concat(this.selectedList.slice(index + 1, this.selectedList.length));
      const i = this.tagList.findIndex(item => item.id === id);
      this.selectedIndex[i] = undefined;
    },
    emitData() {
      this.$emit(
        'getSelectedTag',
        this.selectedList.map(item => item.id)
      );
    },
    closeTagsDialog() {
      this.$emit('closeTagsDialog');
    }
  }
};
</script>
<style lang="scss" scoped>
.tagsBox {
  > div {
    border-top: 1px solid #ddd;
    padding: 15px 0;
    &.awiting {
      display: flex;
      justify-content: space-between;
      padding-bottom: 0;
      .awitingLeft {
        flex: 1;
        margin-right: 15px;
        padding-right: 15px;
        border-right: 1px solid #ddd;
      }
      .awitingRight {
        width: 230px;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      > span {
        font-weight: 600;
      }
      .btns {
        float: right;
      }
    }
    .tagList {
      max-height: 200px;
      overflow-y: scroll;
      .tagItem {
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
      }
      .el-tag.el-tag--info {
        cursor: default;
      }
    }
  }
}
</style>
